<template>
  <div class="header">
    <div class="top">
      <img src="../assets/logo-header.png" alt="">
      <div class="search">
        <a-input-search placeholder="搜索课程" size="large" @search="onSearch">
          <a-button slot="enterButton" style="background-color: #00cf8c ;color: #FFFFFF">
            <a-icon type="search"/>
            搜索
          </a-button>
        </a-input-search>
      </div>
      <slot></slot>
    </div>
    <div class="list">
      <ul>
        <li>首页</li>
        <li><a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            课程分类 <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item v-for="(item,index) in list" :key="index">
              <a href="#">{{item.subjectTitle}}</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
        </li>
        <li>专属课程</li>
      </ul>
    </div>
  </div>
</template>

<script>
import {courseList} from "@/api/api";

export default {
name: "Header2",
  data(){
    return {
      list:[]
    }
  },
  methods:{
    onSearch(value) {
      (value);
    },
  },
  created() {
    courseList(1).then(res=>{
      // (res)
      this.list=res.rows
    })
  }
}
</script>

<style scoped lang="less">
.header {
  width: 1200px;
  margin: auto;
  position: relative;
  .top{
    overflow: hidden;
    height: 106px;
    position: relative;
    img{
      float: left;
      height: 55px;
      margin-top: 22px;
      margin-right: 200px;
    }
    .search{
      float: left;
      width: 400px;
      margin: 30px 6px 0 0;
      position: absolute;
      right: 264px;
      /deep/.ant-input.ant-input-lg{
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
      }
      /deep/.ant-btn.ant-btn-lg.ant-input-search-button{
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
      }
    }
    .login{
      height: 100%;
      float: right;
      margin-right: 100px;
      font-size: 14px;
      padding: 32px 0 0;
    }
  }
  .list{
    position: absolute;
    top: 40px;
    left: 233px;
    zoom: 1;
    ul{
      overflow: hidden;
      li{
        float: left;
        margin: 0 30px 0 0;
        font-size: 16px;
      }
    }

  }
}
</style>